<template>
    <div>
        <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count"><strong>{{list.length}}</strong>剩余</span>
      <ul class="filters" @click="$emit('THclick',type)">
        <li>
          <a @click="type='all'" :class="{selected:type==='all'}" href="#/">全部</a>
        </li>
        <li>
          <a @click="type='yes'" :class="{selected:type==='yes'}"   href="#/active">进行中</a>
        </li>
        <li>
          <a @click="type='no'" :class="{selected:type==='no'}"  href="#/completed">已完成</a>
        </li>
      </ul>
      <button v-show="showClear" @click="hClear"  class="clear-completed">清除已完成</button>
    </footer> 
    </div>
</template>

<script>
export default {
     props:{
       list:{
        required:true,
         type: Array,
       }
     },

    data() {
        return {
           type:'all'
        };
    },
    computed:{
      //计算属性中要加return
      //使用some来判断所有的isDone,只要有一个是true,就返回true
      showClear(){
          return this.list.some(item=>item.isDone)
      }
    },
    methods:{
      hClear(){
        this.$emit('Clearlist')
      }
    }

   
};
</script>

<style >

</style>